﻿<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>json格式化 </title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    
    <link href="/css/bootstrap.min.css" rel="stylesheet" />
    
    <link href="/css/df-common.min.css" rel="stylesheet" />
    <link href="/css/df-index.min.css" rel="stylesheet" />
    <link href="/css/df-json.min.css" rel="stylesheet" />
    <link href="/css/jsoneditor.min.css" rel="stylesheet" />
</head>

<body>
    <div id="delay_load">
        
    </div>
    <div class="container" id="fn_container">
        <div>
            <div class="df-editor left">
                <div class="panel panel-success">
                    <div class="panel-heading panel-heading-title">
                        <p class="left">JSON 高级编辑器</p>
                        <div class="right df-ctrl-group">
                            <a href="javascript:void(0);" title="搜索, 替换 (Ctrl+F, Ctrl+F)">
                                <span class="glyphicon glyphicon-search left"></span>
                            </a> <a href="javascript:void(0);" id="downloadlink" title="保存 (Ctrl+S)">
                                <span class="glyphicon glyphicon-download-alt left"></span>
                            </a> <span class="left">缩进&nbsp;</span> <select class="form-control right" id="df-spaces">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4" selected>4</option>
                            </select>
                            <div class="clear"></div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="alert alert-danger df-hint-fm">
                        <a href="javascript:void(0);" class="close">×</a> <span id="df-fmcontent"></span>
                        <!--<a href="javascript:void(0);" class="close" onclick="$( & #;39;.df - hint - fm & #;39;).hide();">×</a> <span id="df-fmcontent"></span>-->
                    </div>
                    <div id="jsoneditor" style="height: 500px;">
                    </div>
                </div>
                <div>
                    <div class="mtop10 left df-btn-group-left">
                        <div class="btn-group" role="group" aria-label="...">
                            <button class="btn btn-primary" onclick="onClickValidate();"
                                title="Ctrl+Shift+F">校验</button>
                            <button class="btn btn-success" id="df-copy" onclick="onClickCopy();">复制</button>
                            <input class="btn btn-danger" onclick="onClickClear();" type="reset" value="清空" />
                        </div>
                    </div>
                    <div class="mtop10 right df-btn-group-right">
                        <div class="btn-group" role="group" aria-label="...">
                            <button class="btn btn-primary" onclick="onClickFormat();" title="Ctrl+Shift+F">格式化</button>
                            <button class="btn btn-info" onclick="onClickCompact();">压缩</button>
                            <button class="btn btn-success" onclick="onClickEscape();"
                                title="Convert &quot; to \&quot;">转义</button>
                            <button class="btn btn-success" onclick="onClickQuotationMarks();"
                                title="Convert &quot; to \&quot;">引号</button>
                            <button class="btn btn-warning" onclick="onClickUnEscape();"
                                title="UnConvert: Convert \&quot; to &quot;">去除转义</button>
                            <button class="btn btn-danger" id="switch_mode" title="Switch to FullMode or NormalMode"
                                data-toggle="modal" data-target="#switchModeModal">全屏</button>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="mtop10">
                    <div class="alert alert-success mtop10 display-none" id="df-hint"></div>
                    <div class="alert alert-warning display-none" id="df-url">

                    </div>
                    <input type="hidden" id="validate-ok" value="校验成功，JSON格式正确" />
                    <input type="hidden" id="copy-ok" value="文本已复制，可按 Ctrl+V 粘贴" />
                    <input type="hidden" id="copy-error" value="复制失败，请检查您的浏览器设置" />
                    <input type="hidden" id="please-enter-json" value="请您输入JSON字符串 或 返回JSON的URL" />
                    <input type="hidden" id="url-no-any-content" value="您输入的URL无法获取任何内容" />
                    <input type="hidden" id="txt-full-mode" value="全屏" />
                    <input type="hidden" id="txt-normal-mode" value="普通" />
                    <input type="hidden" id="txt-input" value="请您输入JSON字符串 或 返回JSON的URL" />
                    <input type="hidden" id="txt-Valid" value="校验" />
                    <input type="hidden" id="txt-Format" value="格式化" />
                    <input type="hidden" id="txt-Save" value="保存" />
                    <input type="hidden" id="txt-Search" value="搜索, 替换" />
                </div>
            </div>
            <div class="df-splitter left">
                <div class="df-convert">
                    <button class="btn btn-info" onclick="clickConvertToRight();">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </button>
                </div>
                <div class="df-convert">
                    <button class="btn btn-info" onclick="clickConvertToLeft();">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </button>
                </div>
                <div class="df-convert">
                    <button class="btn btn-info" title=" Tips1:请您输入JSON字符串 或 返回JSON的URL,
Tips2:格式化 (Ctrl+Shift+F),
Tips3:保存 (Ctrl+S),
Tips4:搜索, 替换 (Ctrl+F, Ctrl+F)">
                        <span class="glyphicon glyphicon-question-sign"></span>
                    </button>
                </div>
            </div>
            <div class="df-editor left">
                <div class="panel panel-success">
                    <div class="panel-heading panel-heading-title">
                        <div class="left">
                            <button type="button"  class="df-jsoneditor-undo " disabled="" title="撤销"
                                onclick="clickMoreUndo();"><span class="glyphicon glyphicon-remove" style="color:#337ab7"></span></button> <button type="button" class="df-jsoneditor-redo"
                                disabled="" title="重做" onclick="clickMoreRedo();"><span class="glyphicon glyphicon-repeat" style="color:#337ab7"></span></button>
                        </div>
                        <div class="right">
                            <div class="left">
                                <table class="jsoneditor-search jsoneditor-dfsearch"></table>
                            </div>
                            <div class="checkbox df-ctrl-group left">
                                <label><input type="checkbox" checked value="" id="df-ctrl-more-num" />数量</label>&nbsp;&nbsp;
                                <label><input type="checkbox" checked value="" id="df-ctrl-more-index" />下标 </label>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div id="jsoneditor-more" style="height: 500px;">
                    </div>
                </div>
                <div>
                    <div class="mtop10 left df-btn-group-left">
                        <div class="btn-group" role="group" aria-label="...">
                            <button class="btn btn-primary" onclick="onClickMoreExpand();">展开</button> <button
                                class="btn btn-success" id="df-copy" onclick="onClickMoreCollapse();">收缩</button> <input
                                class="btn btn-danger" onclick="onClickMoreClear();" type="reset" value="清空" />
                        </div>
                    </div>
                    <div class="mtop10 right df-btn-group-right">
                        <div class="btn-group" role="group" aria-label="...">
                            <button class="btn btn-primary" onclick="onClickMoreExpandLevel(1);"
                                title="Show level 1">一级</button> <button class="btn btn-info"
                                onclick="onClickMoreExpandLevel(2);" title="Show level 2">二级</button> <button
                                class="btn btn-success" onclick="onClickMoreExpandLevel(3);"
                                title="Show level 3">三级</button> <button class="btn btn-warning"
                                onclick="onClickMoreExpandLevel(4);" title="Show level 4">四级</button> <button
                                class="btn btn-info" onclick="onClickMoreExpandLevel(5);"
                                title="Show level 5">五级</button> <button class="btn btn-danger"
                                onclick="onClickMoreExpandLevel(6);" title="Show level 6">六级</button>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="mtop10 ad_510x90" id="adsenseAutoSize"></div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <div class="modal fade" id="switchModeModal" tabindex="-1" role="dialog" aria-labelledby="switchModeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">全屏模式</h4>
                </div>
                <div class="modal-body" id="fn-modal-body">DevFinal Full Mode</div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="/js/clipboard.min.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/jsoneditor.min.js"></script>
    <script src="/js/df-index.min.js"></script>
</body>

</html>